<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/pagination.css">
    <script src="../../js/tools.js"></script>
    <script src="../../js/api_v1.js"></script>
    <script src="../../js/pagination.js"></script>
    <style>
        /*
        *修改部分样式
        */
        html,body{
				height: 100%;
        }
        /*
        修改用户信息
        */
        .container-update {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-update .update {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-update .update section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-update .update section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-update .update section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-update .update section select {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-update > .update > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-update > .update > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-update > .update > a img {
            width: 15px;
            height: 15px;
        }
        .container-update > .update .user-update {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }
        /*
        添加一级类别 
         */
        .container-addCate {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-addCate .addCate {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-addCate .addCate section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-addCate .addCate section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-addCate .addCate section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
    
        .container-addCate > .addCate > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-addCate > .addCate > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-addCate > .addCate > a img {
            width: 15px;
            height: 15px;
        }
        .container-addCate > .addCate .cate-addCate {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }
        /*
        修改一级类别
        */
        .container-updCate {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-updCate .updCate {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-updCate .updCate section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-updCate .updCate section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-updCate .updCate section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
    
        .container-updCate > .updCate > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-updCate > .updCate > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-updCate > .updCate > a img {
            width: 15px;
            height: 15px;
        }
        .container-updCate > .updCate .cate-updCate {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }
         /*
         添加次级类别
         */
        .container-addSub {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-addSub .addSub {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-addSub .addSub section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-addSub .addSub section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-addSub .addSub section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-addSub .addSub section select {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-addSub > .addSub > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-addSub > .addSub > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-addSub > .addSub > a img {
            width: 15px;
            height: 15px;
        }
        .container-addSub > .addSub .cate-addSub {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }

         /*
         修改次级类别
         */
         .container-updSub {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-updSub .updSub {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-updSub .updSub section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-updSub .updSub section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-updSub .updSub section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-updSub .updSub section select {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-updSub > .updSub > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-updSub > .updSub > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-updSub > .updSub > a img {
            width: 15px;
            height: 15px;
        }
        .container-updSub > .updSub .cate-updSub {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }
        /*
        添加类型
        */
        .container-addType {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-addType .addType {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-addType .addType section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-addType .addType section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-addType .addType section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
    
        .container-addType > .addType > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-addType > .addType > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-addType > .addType > a img {
            width: 15px;
            height: 15px;
        }
        .container-addType > .addType .Type-addType {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }
        /*
        修改类型
        */
        .container-updType {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-updType .updType {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-updType .updType section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-updType .updType section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-updType .updType section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
    
        .container-updType > .updType > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-updType > .updType > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-updType > .updType > a img {
            width: 15px;
            height: 15px;
        }
        .container-updType > .updType .Type-updType {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }
        /*
        添加商品
        */
        .container-addPro {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-addPro .addPro {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-addPro .addPro section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-addPro .addPro section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-addPro .addPro section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-addPro .addPro section select {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-addPro > .addPro > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-addPro > .addPro > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-addPro > .addPro > a img {
            width: 15px;
            height: 15px;
        }
        .container-addPro > .addPro .Pro-addPro {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }
        /*
        添加轮播图
        */
        .container-addTransImg {
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255,0.3);
        }
        .container-addTransImg .addTransImg {
            position: absolute;
            background-color: rgb(189, 181, 157);
            width: 500px;
            height: 400px;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-40%);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .container-addTransImg .addTransImg section{
            width: 300px;
            margin: 0 auto;
            display: flex;
        }
        .container-addTransImg .addTransImg section label {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        .container-addTransImg .addTransImg section input {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-addTransImg .addTransImg section select {
            height: 30px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .container-addTransImg > .addTransImg > p {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .container-addTransImg > .addTransImg > a {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #fff;
        }
        .container-addTransImg > .addTransImg > a img {
            width: 15px;
            height: 15px;
        }
        .container-addTransImg > .addTransImg .trans-addTransImg {
            border-radius: 5px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            margin: 0 auto;
        }
        /*
        */
        .head {
            background-color: brown;
            height: 80px;
        }
        .body {
            margin-top: 40px;
        }
        .body > .content > .body-aside {
            float: left;
            width: 20%;
        }
        .body > .content > .body-aside ul li a{
            display: block;
            height: 60px;
            color: whitesmoke;
            line-height: 60px;
            width: 100%;
            text-align: center;
            background-color: cadetblue;
        }
        .body > .content > .body-aside ul li a:hover{
            color: whitesmoke;
            background-color: rgb(121, 66, 27);
        }
        .body > .content > .body-aside ul li .active{
            color: whitesmoke;
            background-color: rgb(121, 66, 27);
        }
        .body > .content > .body-content {
            overflow: hidden;
            width: auto;
            height: 420px;
            /* border: 1px solid red; */
        }
        .body > .content > .body-content > .body-content-index {
            display: none;
        }
        .body > .content > .body-content > div {
            position: relative;
            margin-left: 30px;
        }
        .body > .content > .body-content > div > p {
            font-size: 20px;
            margin: 10px 20px; 
        }
        .body-content table {
            table-layout: fixed;
            border-spacing: 0px;
            min-width: 700px;
            border-collapse: collapse;
            border: 1px solid rgb(8, 8, 8);
        }
        .body-content table tr:nth-of-type(odd):hover{
            background-color: darkcyan;
        }
        .body-content table tr:nth-of-type(even):hover{
            background-color: rgb(102, 115, 141);
        }
        .body-content table td {
            height: 30px;
            text-align: center;
            border: 1px solid black;
        }
        .body-content > div  .pagination {
            position: absolute;
            top: 380px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .body-content-index4 > .body-content-index-manage {
            margin-bottom: 5px;
            display: flex;
        }
        .body-content-index4 > .body-content-index-manage p a {
            display: block;
            height: 40px;
            width: 100px;
            line-height: 40px;
            text-align: center;
            background-color: darkcyan;
            color: whitesmoke;
        }
        .body-content-index4 > .body-content-index-manage p .active {
            background-color: rgb(89, 121, 148);
            color: whitesmoke;
        }
        
        .body-content > .body-content-index4 > .active{
            display: none;
        }
        .body-content .body-content-index-add{
           position: absolute;
           right:50px;
           top:5px;
        }
        .body-content .body-content-index-add a {
            color: black;
        }
        .body-content .body-content-index-add a:hover {
            color: blue;
        }
        .body-content .body-content-index5 table{
            table-layout: fixed;
        }
        .body-content .body-content-index5 table td{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="head">

    </div>
    <div class="body">
        <div class="content">
            <section class="body-aside">
                <ul>
                    <li><a class="active" href="?opId=1">用户管理</a></li>
                    <li><a href="?opId=2">管理员管理</a></li>
                    <li><a href="?opId=3">类型管理</a></li>
                    <li><a href="?opId=4">类别管理</a></li>
                    <li><a href="?opId=5">商品操作</a></li>
                    <li><a href="?opId=6">轮播图管理</a></li>
                    <li><a href="?opId=7">模块展示</a></li>
                </ul>
            </section>
            <section class="body-content">
                <div class="body-content-index1 body-content-index">
                    <p>管理员管理</p>
                    <table>
                        <col span="1" width="50">
                        <col span="1" width="150">
                        <col span="1" width="300">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>手机号</th>
                                <th>用户密码</th>
                                <th colspan="2">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr>
                                <td>6</td>
                                <td>13886004087</td>
                                <td>12346578</td>
                                <td>修改</td>
                                <td>删除</td>
                            </tr> -->
                        </tbody>
                    </table>
                    <div class="pagination"></div>
                </div>
                <div class="body-content-index2 body-content-index">
                    <p>用户管理</p>
                    <table>
                        <col span="1" width="50">
                        <col span="1" width="150">
                        <col span="1" width="300">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>手机号</th>
                                <th>用户密码</th>
                                <th colspan="2">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr>
                                <td>6</td>
                                <td>13886004087</td>
                                <td>12346578</td>
                                <td>修改</td>
                                <td>删除</td>
                            </tr> -->
                        </tbody>
                    </table>
                    <div class="pagination"></div>
                </div>
                <div class="body-content-index3 body-content-index">
                    <p>类型管理</p>
                    <table>
                        <div class="body-content-index-add">
                            <p><a href="javascript:;">添加+</a></p>
                        </div>
                        <col span="1" width="50">
                        <col span="1" width="300">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>类型名称</th>
                                <th colspan="2">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>新品推荐</td>
                                <td>修改</td>
                                <td>删除</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination"></div>
                </div>
                <div class="body-content-index4 body-content-index">
                    <div class="body-content-index-manage">
                        <p><a class="active" href="javascript:;" myIndex="1">一级类别</a></p><p><a href="javascript:;" myIndex="2">二级类别</a></p>
                    </div>
                    
                    <div class="body-content-index-manage1">
                        <table>
                            <div class="body-content-index-add">
                                <p><a href="javascript:;">添加+</a></p>
                            </div>
                            <col span="1" width="50">
                            <col span="1" width="300">
                            <col span="1" width="90">
                            <col span="1" width="90">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>类别名称</th>
                                    <th colspan="2">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2</td>
                                    <td>家用大件</td>
                                    <td>修改</td>
                                    <td>删除</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pagination"></div>
                    </div>
                    <div class="body-content-index-manage2 active">
                        <table>
                            <div class="body-content-index-add">
                                <p><a href="javascript:;">添加+</a></p>
                            </div>
                            <col span="1" width="50">
                            <col span="1" width="300">
                            <col span="1" width="300">
                            <col span="1" width="90">
                            <col span="1" width="90">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>类别名称</th>
                                    <th>所属大类</th>
                                    <th colspan="2">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2</td>
                                    <td>家用大件</td>
                                    <td>家用电器</td>
                                    <td>修改</td>
                                    <td>删除</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pagination"></div>
                    </div>
                </div>
                <div class="body-content-index5 body-content-index">
                    <p>商品管理</p>
                    <table>
                        <div class="body-content-index-add">
                            <p><a href="javascript:;">添加+</a></p>
                        </div>
                        <col span="1" width="50">
                        <col span="1" width="110">
                        <col span="1" width="210">
                        <col span="1" width="110">
                        <col span="1" width="110">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>商品名</th>
                                <th>商品详情</th>
                                <th>商品类型</th>
                                <th>商品类别</th>
                                <th>商品折扣</th>
                                <th>商品库存</th>
                                <th>价格</th>
                                <th colspan="2">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>吹风机</td>
                                <td>吹风机安徽省考</td>
                                <td>热销榜单</td>
                                <td>个人护理</td>
                                <td>9折</td>
                                <td>10000件</td>
                                <td>￥150</td>
                                <td>修改</td>
                                <td>删除</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination"></div>
                </div>
                <div class="body-content-index6 body-content-index">
                    <p>轮播图管理</p>
                    <table>
                        <div class="body-content-index-add">
                            <p><a href="javascript:;">添加+</a></p>
                        </div>
                        <col span="1" width="50">
                        <col span="1" width="210">
                        <col span="1" width="210">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <col span="1" width="90">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>轮播图</th>
                                <th>描述</th>
                                <th>所属类型</th>
                                <th>是否展示</th>
                                <th colspan="2">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>吹风机</td>
                                <td>吹风机安徽省考</td>
                                <td>热销榜单</td>
                                <td>修改</td>
                                <td>删除</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination"></div>
                </div>
            </section>
        </div>
    </div>
    <div class="foot">

    </div>
    <div class="operate" id="operate">
        
    </div>
    
    <script>
        let opId = getKeyValue("opId");
        $(`.body > .content > .body-content > .body-content-index${opId}`).style.display = "block" ;
        let aEles = document.querySelectorAll(".body-aside ul li a");
        aEles.forEach((item,key)=>{
            if( key + 1 == opId ){
                item.classList.add("active");
            } else {
                item.classList.remove("active");
            }
        });
        if( opId == '1' ){
            let page = 1 ;
            let perPage = 10 ;
            getList(page);
            async function getList(page){
                let res = await managementUser({opt:'getList',page,perPage});
                if( res.length == 0 ){
                    if( page > 1 ){
                        res = await managementUser({opt:'getList',page:page-1,perPage});
                        let tbodyEle = $(".body-content-index1 tbody");
                        getPageNum(page-1,perPage);
                        renderDom(tbodyEle,res,page-1);
                    }
                } else {
                    let tbodyEle = $(".body-content-index1 tbody");
                    getPageNum(page,perPage);
                    renderDom(tbodyEle,res,page);
                }
            }
            function renderDom(ele,dataArr,page){
                ele.innerHTML = '' ;
                dataArr.forEach((item,key)=>{
                    let trEle = document.createElement("tr");
                    trEle.innerHTML = `
                        <td>${key+1}</td>
                        <td>${item['tel']}</td>
                        <td>${item['pwd']}</td>
                        <td myid="${item['id']}" class="upd">修改</td>
                        <td myid="${item['id']}" class="del">删除</td>` ;
                    trEle.onclick = async function (event){
                        let e = event || window.event ; 
                        let target = e.target || e.srcElement;
                        if( target.className == "upd" ){
                            let operate = $(".operate") ; 
                            const updateHTML= await updateHtml();
                            operate.innerHTML = updateHTML ; 
                            let operateEle = $(".operate > .container-update") ;
                            let cancelEle = $(".operate .cancel");
                            let telEle = $("#tel");
                            let pwdEle = $("#pwd");
                            let ulevelEle = $("#ulevel");
                            let submitEle = $(".update .user-update") ; 
                            let id = target.getAttribute("myid") ; 
                            operateEle.style.display = "block" ;
                            const res = await managementUser({opt:'updSel',id});
                            telEle.value = res['tel'];
                            pwdEle.value = res['pwd'];
                            ulevelEle.innerHTML = ` <option selected value="3">普通用户</option>
                                                    <option value="6">管理员</option>
                                                    <option value="9">系统管理员</option>` ; 
                            submitEle.onclick = async function (){
                                let tel = telEle.value ; 
                                let pwd = pwdEle.value ; 
                                let ulevel = ulevelEle.value ; 
                                const res = await managementUser({opt:'upd',id,tel,pwd,ulevel}) ;
                                if( res['status'] == 1 ){
                                    alert('修改成功!');
                                    operateEle.style.display = "none" ;
                                    getList(page);
                                } else {
                                    alert('操作失败!');
                                }
                            }
                            cancelEle.onclick = function (){
                                operateEle.style.display = "none" ;
                            }
                        }
                        if( target.className == "del" ){
                            const res = await managementUser({opt:'del',id:target.getAttribute("myid")});
                            if( res['status'] == 1 ){   
                                alert("删除成功!");
                                getList(page);
                            } else {
                                alert("操作失败!");
                            }
                        }
                    }
                    ele.appendChild(trEle);
                });
            }
            async function getPageNum(page,perPage){
                let res = await managementUser({page,perPage,opt:'getPageNum'});
                let pageEle = $(".pagination");
                new PageClass(pageEle,res['totalPage'],page,function(page){
                    getList(page);
                });
            }
        }
        if( opId == '2' ){
            let page = 1 ; 
            let perPage = 10 ;
            getList(page);
            async function getList(page){
                let res = await adminMan({opt:'getList',page,perPage});
                if( res.length == 0 ){
                    if( page > 1 ){
                        res = await adminMan({opt:'getList',page:page-1,perPage});
                        let tbodyEle = $(".body-content-index2 tbody");
                        getPageNum(page-1,perPage);
                        renderDom(tbodyEle,res,page-1);
                    }
                } else {
                    let tbodyEle = $(".body-content-index2 tbody");
                    getPageNum(page,perPage);
                    renderDom(tbodyEle,res,page);
                }
                let tbodyEle = $(".body-content-index2 tbody");
                renderDom(tbodyEle,res,page)
            }
            function renderDom(ele,dataArr,page){
                ele.innerHTML = '' ;
                dataArr.forEach((item,key)=>{
                    let trEle = document.createElement("tr");
                    trEle.innerHTML = `
                        <td>${key+1}</td>
                        <td>${item['tel']}</td>
                        <td>${item['pwd']}</td>
                        <td class="upd" myid="${item['id']}">修改</td>
                        <td class="del" myid="${item['id']}">删除</td> `;
                    trEle.onclick = async function (event){
                        let e = event || window.event ; 
                        let target = e.target || e.srcElement ; 
                        if( target.className == 'upd' ){
                            let operate = $(".operate") ; 
                            const updateHTML= await updateHtml();
                            operate.innerHTML = updateHTML ; 
                            let operateEle = $(".operate > .container-update") ;
                            let cancelEle = $(".operate .cancel");
                            let telEle = $("#tel");
                            let pwdEle = $("#pwd");
                            let ulevelEle = $("#ulevel");
                            let submitEle = $(".update .user-update") ; 
                            operateEle.style.display = "block" ;
                            let id = target.getAttribute("myid");
                            const res = await adminMan({opt:'updSel',id});
                            telEle.value = res['tel'] ; 
                            pwdEle.value = res['pwd'] ; 
                            ulevelEle.innerHTML = `<option  value="3">普通用户</option>
                                                    <option selected value="6">管理员</option>
                                                    <option value="9">系统管理员</option>` ;
                            submitEle.onclick = async function (){
                                let tel = telEle.value ; 
                                let pwd = pwdEle.value ; 
                                let ulevel = ulevelEle.value ; 
                                const data = await adminMan({id,tel,pwd,ulevel,opt:'upd'});
                                if( data['status'] == 1 ){
                                    alert('修改成功!');
                                    getList(page);
                                    operateEle.style.display = "none" ;
                                } else {
                                    alert('操作失败!');
                                    getList(page);
                                }
                            }
                            cancelEle.onclick = function (){
                                operateEle.style.display = "none" ;
                            }
                        } else if ( target.className == 'del' ){
                            let id = target.getAttribute("myid");
                            const res = await adminMan({opt:'del',id});
                            if( res['status'] == 1 ){
                                alert('删除成功!');
                                getList(page);
                            } else {
                                alert('操作失败!');
                                getList(page);
                            }
                        }
                    }
                    ele.appendChild(trEle);
                });
            }
            async function getPageNum(page,perPage){
                let res = await adminMan({perPage,opt:'getPageNum'});
                let pageEle = $(".body-content-index2 .pagination");
                new PageClass(pageEle,res['totalPage'],page,function(page){
                    getList(page);
                });
            }
        }
        if( opId == '3' ){
            let page = 1 ; 
            let perPage = 10 ;
            getList(page);
            async function addType(page){
                let addEle = document.querySelector('.body-content-index3 .body-content-index-add a');
                addEle.onclick = async function (){
                    let operate = $(".operate") ; 
                    let addTypHtml = await addTypeHtml();
                    operate.innerHTML = addTypHtml ; 
                    let operateEle = $(".operate > .container-addType") ;
                    let cancelEle = $(".operate .cancel");
                    operateEle.style.display = "block" ;
                    let TypeNameEle = $(".operate #TypeName");
                    let submitEle = $(".operate .Type-addType");
                    submitEle.onclick = async function (){
                        let TypeName = TypeNameEle.value ; 
                        let res = await typeMan({opt:'addType',TypeName}) ;
                        if( res['status'] == 1 ){
                            alert('添加成功!');
                            operateEle.style.display = "none" ;
                            getList(page);
                        } else {
                            alert('操作失败!');
                            operateEle.style.display = "none" ;
                            getList(page);
                        }
                    }
                    cancelEle.onclick = function (){
                        operateEle.style.display = "none" ;
                    }
                }
            }
            async function getList(page){
                addType(page) ; 
                let res = await typeMan({opt:'getList',page,perPage});
                if( res.length == 0 ){
                    if( page > 1 ){
                        res = await typeMan({opt:'getList',page:page-1,perPage});
                        let tbodyEle = $(".body-content-index3 tbody");
                        getPageNum(page-1,perPage);
                        renderDom(tbodyEle,res,page-1);
                    }
                } else {
                    let tbodyEle = $(".body-content-index3 tbody");
                    getPageNum(page,perPage);
                    renderDom(tbodyEle,res,page);
                }
            }
            function renderDom(ele,dataArr,page){
                ele.innerHTML = '' ;
                dataArr.forEach((item,key)=>{
                    let trEle = document.createElement("tr");
                    trEle.innerHTML = `<td>${key+1}</td>
                                <td>${item['typeName']}</td>
                                <td class="upd" myid="${item['id']}">修改</td>
                                <td class="del" myid="${item['id']}">删除</td>` ;
                    let updEle = trEle.querySelector(".upd");
                    let delEle = trEle.querySelector(".del");
                    updEle.onclick = async function (){
                        let myid = this.getAttribute("myid");
                        let updTypHtml = await updTypeHtml();
                        let operate = $(".operate") ; 
                        operate.innerHTML = updTypHtml ; 
                        let operateEle = $(".operate > .container-updType") ;
                        let cancelEle = $(".operate .cancel");
                        operateEle.style.display = "block" ;
                        let TypeNameEle = $(".operate #TypeName");
                        let submitEle = $(".operate .Type-updType");
                        let data = await typeMan({opt:'getUpdType',myid});
                        TypeNameEle.value = data['typeName'] ; 
                        submitEle.onclick = async function (){
                            let typeName = TypeNameEle.value ; 
                            let res = await typeMan({opt:'updType',typeName,myid}) ;
                            if( res['status'] == 1 ){
                                alert('添加成功!');
                                operateEle.style.display = "none" ;
                                getList(page);
                            } else {
                                alert('操作失败!');
                                operateEle.style.display = "none" ;
                                getList(page);
                            }
                        }
                        cancelEle.onclick = function (){
                            operateEle.style.display = "none" ;
                        }
                    }
                    delEle.onclick = async function (){
                        let myid = this.getAttribute("myid");
                        let res = await typeMan({opt:'del',myid});
                        if( res['status'] == 1 ){
                            alert('删除成功!');
                            getList(page);
                        } else {
                            alert('操作成功!');
                            getList(page);
                        }
                    }
                    ele.appendChild(trEle);
                });
            }
            async function getPageNum(page,perPage){
                let res = await typeMan({perPage,opt:'getPageNum'});
                let pageEle = $(".body-content-index3 .pagination");
                new PageClass(pageEle,res['totalPage'],page,function(page){
                    getList(page);
                });
            }
        }
        if( opId == '4' ){
            let page = 1 ; 
            let perPage = 10 ;
            let tagTransEles = document.querySelectorAll(".body-content-index-manage > p > a");
            tagTransEles.forEach(tagTransEle=>{
                tagTransEle.onclick = function (){
                    let index = this.getAttribute("myIndex");
                    tagTransEles.forEach((item,key)=>{
                        item.classList.remove("active");
                        document.querySelector(`.body-content-index-manage${key+1}`).classList.add("active");
                    });
                    document.querySelector(`.body-content-index-manage${index}`).classList.remove("active");
                    addCate(index,page);
                    if( index == 1 ){
                        getCateList(page);
                    } else if( index == 2 ){
                        getSubList(page);
                    }
                    this.classList.add("active");
                }
            });
            addCate(1,page);
            function addCate(index,page){
                let addEle = document.querySelector(`.body-content-index-manage${index}`).querySelector('.body-content-index-add a');
                addEle.onclick = async function (){
                    if( index == 1 ){
                        const addCatHtml = await addCateHtml();
                        let operate = $(".operate") ; 
                        operate.innerHTML = addCatHtml ; 
                        let operateEle = $(".operate > .container-addCate") ;
                        let cateNameEle = $(".operate > .container-addCate #cateName");
                        let cancelEle = $(".operate .cancel");
                        let submitEle = $(".addCate .cate-addCate") ; 
                        submitEle.onclick = async function(){
                            let cateName = cateNameEle.value ; 
                            let res = await adminMan({opt:'addCate',cateName});
                            if( res['status'] == 1 ){
                                alert('添加成功!');
                                operateEle.style.display = "none" ;
                                getCateList(page) ;
                            }
                        } 
                        operateEle.style.display = "block" ;
                        cancelEle.onclick = function (){
                            operateEle.style.display = "none" ;
                        }
                    } else if( index == 2 ){
                        const addSubHtml = await addSubeHtml();
                        let operate = $(".operate") ; 
                        operate.innerHTML = addSubHtml ; 
                        let operateEle = $(".operate > .container-addSub") ;
                        let cancelEle = $(".operate .cancel");
                        let cateNameEle = $(".operate #cateName");
                        let cateSel = await cateSelect({opt:'cateSelect'});
                        cateNameEle.innerHTML = cateSel['data'] ; 
                        let subNameEle = $(".operate #subName");
                        let submitEle = $(".addSub .cate-addSub") ;
                        submitEle.onclick = async function (){
                            let subName = subNameEle.value ; 
                            let cateId = cateNameEle.selectedOptions[0].attributes.value.value ; 
                            let cateName = cateNameEle.selectedOptions[0].attributes.value1.value ;
                            let res = await adminMan({opt:'addSub',cateId,cateName,subName});
                            if( res['status'] == 1 ){
                                alert('添加成功!');
                                operateEle.style.display = "none" ;
                                getSubList(page);
                            } else {
                                alert('操作失败!');
                                operateEle.style.display = "none" ;
                                getSubList(page);
                            }
                        }
                        operateEle.style.display = "block" ; 
                        cancelEle.onclick = function (){
                            operateEle.style.display = "none" ;
                        }
                    }
                }
            }
            getCateList(page);
            async function getCateList(page){
                let res = await adminMan({opt:'getCateList',page,perPage});
                if( res.length == 0 ){
                    if( page > 1 ){
                        res = await adminMan({opt:'getCateList',page:page-1,perPage});
                        let tbodyEle = $(".body-content-index4 .body-content-index-manage1 tbody");
                        getPageNum(page-1,perPage);
                        renderDom(tbodyEle,res,page-1);
                    }
                } else {
                    let tbodyEle = $(".body-content-index4 .body-content-index-manage1 tbody");
                    getPageNum(page,perPage);
                    renderDom(tbodyEle,res,page);
                }
                let tbodyEle = $(".body-content-index4 .body-content-index-manage1 tbody");
                renderDom(tbodyEle,res,page) ;
                getPageNum(page,perPage) ;
            }
            function renderDom(ele,dataArr,page){
                ele.innerHTML = '' ;
                dataArr.forEach((item,key)=>{
                    let trEle = document.createElement("tr");
                    trEle.innerHTML = `
                        <td>${key+1}</td>
                        <td>${item['cateName']}</td>
                        <td class="upd" myid="${item['id']}">修改</td>
                        <td class="del" myid="${item['id']}">删除</td>` ;
                    let updEle = trEle.querySelector('.upd');
                    let delEle = trEle.querySelector('.del');
                    updEle.onclick = async function (){
                        const updCatHtml = await updCateHtml();
                        let operate = $(".operate") ;
                        operate.innerHTML = updCatHtml ; 
                        let operateEle = $(".operate > .container-updCate") ;
                        let cancelEle = $(".operate .cancel");
                        let cateNameEle = $(".operate #cateName");
                        let submitEle = $(".updCate .cate-updCate") ;
                        operateEle.style.display = "block" ;
                        let myid = this.getAttribute("myid");
                        let data = await getUpdCate({opt:'getDataCate',myid});
                        cateNameEle.value = data['cateName'] ; 
                        submitEle.onclick = async function (){
                            let cateName = cateNameEle.value ; 
                            let res = await adminMan({opt:'updCate',cateName,myid});
                            if( res['status'] == 1 ){
                                alert('修改成功!');
                                operateEle.style.display = "none" ;
                                getCateList(page);
                            } else {
                                alert('操作失败!');
                                operateEle.style.display = "none" ;
                                getCateList(page);
                            }
                        }
                        cancelEle.onclick = function (){
                            operateEle.style.display = "none" ;
                        }
                    }
                    delEle.onclick = async function(){
                        let myid = this.getAttribute("myid");
                        let res = await adminMan({opt:'delCate',myid});
                        if( res['status'] == 1 ){
                            alert('删除成功!');
                            getCateList(page);
                        } else{
                            alert('操作失败!');
                            getCateList(page);
                        }
                    } 
                    ele.appendChild(trEle);
                });
            }
            async function getPageNum(page,perPage){
                let res = await adminMan({opt:'getCatePage',perPage});
                let pageEle = $(".body-content-index4 .body-content-index-manage1 .pagination");
                new PageClass(pageEle,res['totalPage'],page,function(page){
                    getCateList(page) ;
                });
            }
            getSubList(page);
            async function getSubList(page){
                let res = await adminMan({opt:'getSubList',page,perPage});
                if( res.length == 0 ){
                    if( page > 1 ){
                        res = await adminMan({opt:'getSubList',page:page-1,perPage});
                        let tbodyEle = $(".body-content-index4 .body-content-index-manage2 tbody");
                        getSubPage(page-1,perPage);
                        renderSubDom(tbodyEle,res,page-1);
                    }
                } else {
                    let tbodyEle = $(".body-content-index4 .body-content-index-manage2 tbody");
                    getSubPage(page,perPage);
                    renderSubDom(tbodyEle,res,page);
                }
                let tbodyEle = $(".body-content-index4 .body-content-index-manage2 tbody");
                renderSubDom(tbodyEle,res,page) ;
                getSubPage(page,perPage) ;
            }
            function renderSubDom(ele,dataArr,page){
                ele.innerHTML = '' ;
                dataArr.forEach((item,key)=>{
                    let trEle = document.createElement("tr");
                    trEle.innerHTML = `<td>${key+1}</td>
                        <td>${item['subCateName']}</td>
                        <td>${item['cateName']}</td>
                        <td class="upd" myid="${item['id']}">修改</td>
                        <td class="del" myid="${item['id']}">删除</td> `;
                    let updEle = trEle.querySelector(".upd");
                    let delEle = trEle.querySelector(".del");
                    updEle.onclick = async function (){
                        const updSubHtml = await updSubeHtml();
                        console.log(updSubHtml);
                        let operate = $(".operate") ;
                        operate.innerHTML = updSubHtml ; 
                        let operateEle = $(".operate > .container-updSub") ;
                        let cancelEle = $(".operate .cancel");
                        let subNameEle = $(".operate #subName");
                        let cateNameEle = $(".operate #cateName");
                        let submitEle = $(".updSub .cate-updSub") ;
                        operateEle.style.display = "block" ;
                        let myid = this.getAttribute("myid");
                        let data = await getUpdCate({opt:'getDataSub',myid});
                        subNameEle.value = data['subCateName'] ; 
                        cateNameEle.innerHTML = data['options'] ; 
                        submitEle.onclick = async function (){
                            let subName = subNameEle.value ; 
                            let cateId = cateNameEle.selectedOptions[0].attributes.value.value ; 
                            let cateName = cateNameEle.selectedOptions[0].attributes.value1.value ;
                            
                            let res = await adminMan({opt:'updSub',subName,cateId,cateName,myid});
                            if( res['status'] == 1 ){
                                alert('修改成功!');
                                operateEle.style.display = "none" ;
                                getCateList(page);
                            } else {
                                alert('操作失败!');
                                operateEle.style.display = "none" ;
                                getCateList(page);
                            }
                        }
                        cancelEle.onclick = function (){
                            operateEle.style.display = "none" ;
                        }
                    }
                    delEle.onclick = async function (){
                        let myid = this.getAttribute("myid");
                        let res = await adminMan({opt:'delSub',myid});
                        if( res['status'] == 1 ){
                            alert('删除成功!');
                            getSubList(page);
                        } else {
                            alert('操作失败!');
                            getSubList(page); 
                        }
                    }
                    ele.appendChild(trEle);
                });
            }
            async function getSubPage(page,perPage){
                let res = await adminMan({opt:'getSubPage',perPage});
                let pageEle = $(".body-content-index4 .body-content-index-manage2 .pagination");
                new PageClass(pageEle,res['totalPage'],page,function(page){
                    getSubList(page) ;
                });
            }
        }
        if( opId == '5' ){
            let page = 1 ; 
            let perPage = 6 ; 
            getList(page);
            async function addPro(page){
                let addProEle = $('.body-content-index5 .body-content-index-add a');
                addProEle.onclick = async function (){
                    let operate = $(".operate") ; 
                    let addProHtml = await addProdHtml();
                    operate.innerHTML = addProHtml ; 
                    let operateEle = $(".operate > .container-addPro") ;
                    let cancelEle = $(".operate .cancel");
                    operateEle.style.display = "block" ;
                    let submitEle = $(".operate .Pro-addPro");
                    let proNameEle = $(".operate #proName");
                    let cateEle = $(".operate #cateId");
                    let typeEle = $(".operate #typeId");
                    let data = await productMan({opt:'selAddPro'});
                    cateEle.innerHTML = data['data2'] ; 
                    typeEle.innerHTML = data['data1'] ;
                    let priceEle = $(".operate #price");
                    let inventoryEle = $(".operate #inventory");
                    let discountEle = $(".operate #discount");
                    let imgSrcEle = $(".operate #imgSrc");
                    submitEle.onclick = async function (){
                        // let proName = proNameEle.value ; 
                        // let cateId = cateEle.value ; 
                        // let typeId = typeEle.value ; 
                        // let price = priceEle.value ; 
                        // let inventory = inventoryEle.value ; 
                        // let discount = discountEle.value ; 
                        // let imgSrc = imgSrcEle.files[0] ; 
                        let form = new FormData();
                        form.append("opt","addPro");
                        form.append("proName",proNameEle.value);
                        form.append("cateId",cateEle.value);
                        form.append("typeId",typeEle.value);
                        form.append("price",priceEle.value);
                        form.append("inventory",inventoryEle.value);
                        form.append("discount",discountEle.value);
                        form.append("imgSrc",imgSrcEle.files[0]);
                        
                        let res = await productManFile(form) ;
                        console.log(res);
                        if( res['status'] == 1 ){
                            alert('添加成功!');
                            operateEle.style.display = "none" ;
                            getList(page);
                        } else {
                            alert('操作失败!');
                            operateEle.style.display = "none" ;
                            getList(page);
                        }
                    }
                    cancelEle.onclick = function (){
                        operateEle.style.display = "none" ;
                    }
                }
            }
            async function getList(page){
                let res = await productMan({opt:'getList',page,perPage});
                if( res.length == 0 ){
                    if( page > 1 ){
                        res = await productMan({opt:'getList',page:page-1,perPage});
                        let tbodyEle = $(".body-content-index5 table tbody");
                        getPageNum(page-1,perPage);
                        renderDom(tbodyEle,res,page-1);
                    }
                } else {
                    let tbodyEle = $(".body-content-index5 table tbody");
                    getPageNum(page,perPage);
                    renderDom(tbodyEle,res,page);
                }
                addPro(page);
            }
            function renderDom(ele,dataArr,page){
                ele.innerHTML = '' ;
                dataArr.forEach((item,key)=>{
                    let trEle = document.createElement("tr");
                    trEle.innerHTML = `<td>${key+1}</td>
                                <td>${item['pname']}</td>
                                <td><img style="width:45px;height:45px;" src="../../uploads/${item['img']}"/></td>
                                <td>${item['typeName']}</td>
                                <td>${item['subid']?item['subCateName']:item['cateName']}</td>
                                <td>${item['discount']}</td>
                                <td>${item['inventory']}</td>
                                <td>￥${item['price']}</td>
                                <td class="upd" myid="${item['id']}">修改</td>
                                <td class="del" myid="${item['id']}">删除</td>` ; 
                    let updEle = trEle.querySelector(".upd");
                    let delEle = trEle.querySelector(".del");
                    updEle.onclick = async function (){
                        let myid = this.getAttribute("myid");
                    }
                    delEle.onclick = async function (){
                        let myid = this.getAttribute("myid");
                        let res = await productMan({opt:'delPro',myid});
                        if( res['status'] == 1 ){
                            alert('删除成功!');
                            getList(page);
                        } else {
                            alert('操作失败!');
                            getList(page);
                        }
                    }
                    ele.appendChild(trEle);
                });
            }    
            async function getPageNum(page,perPage){
                let res = await productMan({opt:'getPage',perPage});
                let paginationEle = $('.body-content-index5 .pagination');
                new PageClass(paginationEle,res['totalPage'],page,function(page){
                    getList(page);
                });
            }  
        }
        if( opId == '6' ){
            let page = 1 ; 
            let perPage = 5 ; 
            getList(page);
            async function addTransImg(page){
                let addEle = $('.body-content-index6 .body-content-index-add a');
                addEle.onclick = async function (){
                    let operate = $(".operate") ; 
                    let addTransHtml = await addTransImgHtml();
                    operate.innerHTML = addTransHtml ;
                    let operateEle = $(".operate > .container-addTransImg") ;
                    let cancelEle = $(".operate .cancel");
                    operateEle.style.display = "block" ;
                    let submitEle = $(".operate .trans-addTransImg");
                    let typeNameEle = $(".operate #typeName");
                    let data = await productMan({opt:'selAddPro'});
                    typeNameEle.innerHTML = data['data1'] ;
                    let titleEle = $(".operate #title");
                    let srcImgEle = $(".operate #srcImg");
                    submitEle.onclick = async function (){
                        let form = new FormData();
                        form.append("title",titleEle.value);
                        form.append("typeName",typeNameEle.value);
                        form.append("srcImg",srcImgEle.files[0]);
                        form.append("opt","addTransImg");
                        let res = await addTransImgMan(form);
                        if( res['status'] == 1 ){
                            alert('添加成功!');
                            operateEle.style.display = "none" ;
                            getList(page);
                        } else {
                            alert('操作失败!');
                            operateEle.style.display = "none" ;
                            getList(page);
                        }
                    }
                    cancelEle.onclick = function (){
                        operateEle.style.display = "none" ;
                    }
                }
            } 
            async function getList(page){
                let res = await tranImgMan({opt:'getList',page,perPage});
                let tbodyEle = $(".body-content-index6 table tbody");
                if( res.length == 0 ){
                    if( page > 1 ){
                        res = await tranImgMan({opt:'getList',page:page-1,perPage});
                        getPageNum(page-1,perPage);
                        renderDom(tbodyEle,res,page-1);
                    }
                } else {
                    getPageNum(page,perPage);
                    renderDom(tbodyEle,res,page);
                }
                addTransImg(page);
            }
            function renderDom(ele,dataArr,page){
                ele.innerHTML = '' ;
                dataArr.forEach((item,key)=>{
                    let trEle = document.createElement("tr");
                    trEle.innerHTML = `<td>${key+1}</td>
                                <td>${item['title']}</td>
                                <td><img style="width:90px;height:45px;" src="../../uploads/${item['imgSrc']}" /></td>
                                <td>${item['typeName']}</td>
                                <td></td>
                                <td class="upd" myid="${item['id']}">修改</td>
                                <td class="del" myid="${item['id']}">删除</td>` ;
                    let updEle = trEle.querySelector('.upd');
                    let delEle = trEle.querySelector('.del');
                    updEle.onclick = async function (){
                        let myid = this.getAttribute("myid");
                    }
                    delEle.onclick = async function (){
                        let myid = this.getAttribute("myid");
                        let res = await tranImgMan({opt:'delTransImg',myid});
                        if( res['status'] == 1 ){
                            alert('删除成功!');
                            getList(page);
                        } else {
                            alert('操作失败!');
                            getList(page);
                        }
                    }
                    ele.appendChild(trEle);
                });
            }
            async function getPageNum(page,perPage){
                let res = await tranImgMan({opt:'getPage',perPage});
                let paginationEle = $('.body-content-index6 .pagination');
                new PageClass(paginationEle,res['totalPage'],page,function(page){
                    getList(page);
                });
            }
        }
        function getKeyValue(key){
            let str = window.location.search ;
            let arr = str.substr(1,str.length).split("&");
            let newArr = [] ; 
            arr.forEach(item=>{
                let obj = {} ; 
                obj[item.split("=")[0]] = item.split("=")[1] ; 
                newArr.push(obj);
            });
            let  flag = '' ;
            newArr.forEach(item=>{
                if(typeof item[key] !== 'undefined' ){
                    flag =  item[key] ; 
                }
            });
            return flag ; 
        }
        /*
        
        
        
        
        
        
        
        
        
        */
        /*to     do
        opid = 5  6 的修改按钮
        */
    </script>
</body>
</html>